<template>
  <div id="youxi1"
    :class="shoplist.gift_list.length<10 && cur == 2?'dressUpExchange dressUpExchange1':'dressUpExchange' "
    :style="shoplist.goods_list.length<10 && cur == 1?'height:100vh':''">
    <div class="dress_load" v-if="dressloadShow">
      <van-loading color="#1989fa" size="80" :vertical="true" class="dress_load_load" />
    </div>

    <div class="head_tabbar" v-else :style="{paddingTop:Height*1+10+'px'}">
      <div @click="router_go">
        <img src="../../public/img/dress_new/jinru.png" alt="">
      </div>
      <div class="title_">
        <div @click="homePage('1')">
          <span :class="{ active: cur == 1 }">装扮兑换</span>
          <div v-show="cur == 1"></div>
        </div>
        <div @click="homePage('2')">
          <span :class="{ active: cur == 2 }">礼物兑换</span>
          <div v-show="cur == 2"></div>
        </div>
      </div>
      <div>
        <span @click="Jump_ex">兑换记录</span>
      </div>
    </div>

    <div class="fragment">
      <div class="nth_farmg">
        <span>装扮碎片</span>
        <div>
          <img src="../../public/img/dressUpExchange/zuanban.png" alt="" />
          <span>{{ shoplist.goods_num }}</span>
        </div>
      </div>
      <div></div>
      <div class="nth_farmg">
        <span>礼物碎片</span>
        <div>
          <img src="../../public/img/dressUpExchange/gift.png" alt="" />
          <span>{{ shoplist.gift_num }}</span>
        </div>
      </div>
    </div>

    <div class="body_content" v-show="cur == 1">
      <div v-for="(item, index) in shoplist.goods_list" :key="index" class="border_list">
        <div class="box_fa">
          <img :src="item.imageFile" alt="" />
          <span>{{ item.goodsName }}</span>
          <div>
            <img src="../../public/img/dressUpExchange/zuanban.png" alt="" />
            <span>{{ item.gold }}碎片</span>
          </div>
        </div>
        <div class="button_fa">
          <div @click="Turn('1', item, '1')">兑换</div>
          <div @click="Turn('2', item, '1')">赠送</div>
        </div>
      </div>
    </div>
    <div class="body_content body_content_" v-show="cur == 2">
      <div v-for="(item, index) in shoplist.gift_list" :key="index" class="border_list border_list_">
        <div></div>
        <div class="box_fa">
          <img :src="item.icon" alt="" />
          <span>{{ item.name }}</span>
          <span>价值{{ item.money }}钻</span>
          <div>
            <img src="../../public/img/dressUpExchange/gift.png" alt="" />
            <span>{{ item.gold }}</span>
          </div>
        </div>
        <div class="button_fa button_fa_">
          <div @click="Turn('1', item, '2')">兑换</div>
        </div>
      </div>
    </div>

    <!-- 翻拍规则 -->
    <div class="overlay" v-show="Turn_s" @click="Turn_s = !Turn_s"></div>
    <div class="getRules_s" v-show="Turn_s">
      <div class="OwnExchange" v-show="isExchange">
        <span>兑换<span v-if="giftdetails.day">装扮</span><span v-else>礼物</span>【{{
            giftdetails.goodsName ? giftdetails.goodsName : giftdetails.name
          }}】</span>
        <div class="image_position">
          <div></div>
          <img :src="
              giftdetails.imageFile ? giftdetails.imageFile : giftdetails.icon
            " alt="" />
        </div>
        <div class="AdditionSubtraction">
          <div @click="reduce">
            <div class="jian"></div>
          </div>
          <div>
            <input type="number" v-model="exchange_num" maxlength="2" />
          </div>
          <div @click="plus">+</div>
        </div>
        <span v-if="giftdetails.day">有效期 : {{ giftdetails.day * exchange_num }} 天</span>
        <div @click="ExchangeGifts">
          <span>消耗</span>
          <img v-if="shopexchange == '1'" src="../../public/img/dressUpExchange/zuanban.png" alt="" />
          <img v-else src="../../public/img/dressUpExchange/gift.png" alt="" />
          <span>{{ giftdetails.gold * exchange_num }} 兑换</span>
        </div>
      </div>
      <div class="sendFriends" v-show="!isExchange" >
        <div>赠送好友</div>
        <div>
          <input type="number" v-model="friends_id" @input="search()" placeholder="赠送好友id"/>
        </div>
        <div class="search" :style="{ height: heighr_ + 'vw' }">
          <div class="user_list" v-for="(item, index) in friends_list" :key="index" @click="clear(item)">
            <img :src="item.head_pic" alt="" />
            <div>
              <span>{{ item.nickname }}</span>
              <span>ID：{{ item.perfect_number }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    Toast
  } from "vant";
  import {
    Dialog
  } from "vant";
  import header_ from '../../components/header_'
  export default {
    data() {
      return {
        giftdetails: {}, //礼品详情
        dressloadShow: true,
        shoplist: {
          gift_list: [],
          goods_list: [],
        }, //装扮兑换或赠送
        cur: 1,
        Turn_s: false,
        exchange_num: 1, //兑换数量
        isExchange: false, //兑换true赠送false
        friends_id: "", //好友id
        friends_list: [], //搜索到的好友列表
        touserid: "",
        shopexchange: "",
        Height: '45',

      };
    },
    components: {
      header_
    },
    watch: {
      //watch()监听某个值（双向绑定）的变化，从而达到change事件监听的效果
      exchange_num: {
        handler: function () {
          if (this.exchange_num > 999) {
            console.log(123);
            this.exchange_num = 999;
            return Toast("最多兑换999");
          } else {
            this.exchange_num = Math.floor(Math.abs(this.exchange_num));
          }
        },
        deep: true,
      },
    },
    computed: {
      heighr_: function () {
        if (this.friends_list.length > 4) {
          return 4 * 13.4 + 6;
        } else {
          return this.friends_list.length * 13.4 + 6;
        }
      },
    },
    created() {
      this.homePage(this.cur);
    },
    mounted() {
      var u = navigator.userAgent;
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      // console.log(isiOS);
      if (isiOS) {
        if (window.webkit) {
          window.webkit.messageHandlers.getStatusBarHeight.postMessage({});
          //Vue的方法给原生调用，则需要把方法挂在Window下面
          window.sendStatusBarHeight = this.sendStatusBarHeight;
          window.webkit.messageHandlers.setStatusBarTheme.postMessage({
            setStatusBarTheme: 1
          });
        }
      } else {
        app.setStatusBarTheme(1)
        this.Height = app.getStatusBarHeight();
      }
    },
    methods: {
      sendStatusBarHeight(Height) {
        this.Height = Height;
      },
      router_go() {
        if (window.isiOS) {
          console.log("isiOS");
          window.webkit.messageHandlers.backAction.postMessage({});
        } else {
          console.log("安卓返回事件");
          app.backAction();
        }
      },
      clear(item) {
        let _ = this;
        _.touserid = item.user_id;
        console.log(_.giftdetails.goodsName);
        Dialog.confirm({
            title: "确认赠送",
            message: "赠送" + item.nickname + _.giftdetails.goodsName,
            beforeClose,
          })
          .then(() => {
            // console.log("确认");
            _.ExchangeGifts();
          })
          .catch(() => {
            // console.log("取消");
          });

        function beforeClose(action, done) {
          if (action === "confirm") {
            setTimeout(done, 500);
          } else {
            done();
          }
        }
      },
      //确认兑换
      ExchangeGifts() {
        console.log(this.giftdetails);
        let num = this.exchange_num;
        let id = this.giftdetails.goodsId ?
          this.giftdetails.goodsId :
          this.giftdetails.id;
        let touserid = this.touserid;
        let type = this.shopexchange;
        let arys = {
          num,
          id,
          touserid,
          type
        }; //参数
        console.log(arys);
        let url = "/lottery/shopexchange";
        this.$.encryption2(arys, url).then((res) => {
          this.homePage(this.cur);
          console.log(res.data.text);
          this.Turn_s = false;
          Toast(res.data.text);
        });
      },
      //确认赠送
      give_friends() {
        let arys = {}; //参数
        let url = "/activity/leaderSign";
        this.$.encryption2(arys, url).then((res) => {
          console.log(res.data.result);
        });
      },
      //首页
      homePage(type) {
        this.cur = type;
        let arys = {
          type: type,
        }; //参数
        let url = "/lottery/shoplist";
        this.$.encryption2(arys, url).then((res) => {
          // console.log(res.data.result);
          // Toast(res.data.text)
          this.shoplist = res.data.result;
          this.dressloadShow = false;
        });
      },
      //跳转中奖记录
      Jump_ex() {
        this.$router.push("/exchangeRecord");
      },

      //兑换数量减
      reduce() {
        if (this.exchange_num < 2) {
          return Toast("兑换数量不能少于1");
        }
        this.exchange_num--;
      },
      //兑换数量加
      plus() {
        this.exchange_num++;
      },
      //弹出兑换/赠送框
      Turn(ex, item, shopexchange) {
        this.exchange_num = 1;
        this.giftdetails = {};

        if (ex === "1") {
          this.isExchange = true;
        } else {
          this.isExchange = false;
        }
        this.shopexchange = shopexchange; //1兑换2赠送
        this.giftdetails = item; //礼物消息
        this.Turn_s = !this.Turn_s;
      },
      //搜索好友
      search() {
        if (!this.friends_id || this.friends_id.length < 4) {
          return (this.friends_list = []);
        }
        let arys = {
          type: "1",
          key: this.friends_id,
          page: "1",
        }; //参数
        let url = "/search/searchUserList";
        this.$.encryption2(arys, url).then((res) => {
          this.friends_list = res.data.result.user;
        });
      },
    },
  };
</script>

<style scoped>
  .image_position {
    display: flex;
    justify-content: center;
    align-content: center;
  }

  .image_position>div {
    position: absolute;
    /* background: linear-gradient(135deg, #c71eeb 0%, #4665f7 100%); */
    border-radius: 0px 2.9vw 0px 2.9vw;
    width: 13.5vw;
    height: 6.3vw;
    font-size: 3.4vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    line-height: 6.3vw;
    right: 0;
    top: 0vw;
  }

  .image_position>img {
    width: 41vw;
    height: 41vw;
  }

  .dress_load {
    width: 100vw;
    height: 100vh;
    position: relative;
  }

  .dress_load_load {
    margin-top: 40vh;
  }

  .user_list>div>span:nth-of-type(1) {
    font-size: 3.6vw;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
  }

  .user_list>div>span:nth-of-type(2) {
    font-size: 3vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
  }

  .user_list>div {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 2vw;
  }

  .user_list>img {
    width: 13.4vw;
    height: 13.4vw;
    border-radius: 50%;
  }

  .user_list {
    width: 100%;
    height: 13.4vw;
    display: flex;
    margin: 2vw 0;
  }

  .search {
    width: 90vw;
    margin: 5.8vw auto 2vw;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
  }

  .sendFriends input::placeholder {
    color: rgb(235, 229, 229) !important;
    font-size: 3.4vw;
    letter-spacing: 1px;
  }

  .sendFriends>div:nth-of-type(2)>input {
    width: 90%;
    height: 100%;
    color: #ffffff;
    background: rgba(141, 176, 250, 0);
    border: 0;
  }

  .sendFriends>div:nth-of-type(2) {
    width: 90vw;
    height: 8.7vw;
    border-radius: 5vw;
    background: rgba(141, 176, 250, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .sendFriends>div:nth-of-type(1) {
    font-size: 4.4vw;
    padding: 4.6vw 0 4.8vw 0;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
  }

  .sendFriends {
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
  }

  .AdditionSubtraction>div:nth-of-type(2) {
    width: 16vw;
    height: 7.2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1vw;
    background: rgba(141, 176, 250, 0.2);
  }

  .AdditionSubtraction>div>input {
    width: 100%;
    height: 100%;
    background-color: rgba(141, 176, 250, 0.1);
    border: 0;
    text-align: center;
    color: #ffffff;
  }

  .jia {
    width: 4vw;
    height: 1vw;
    border-radius: 1vw;
    color: #ffffff;
    background: #fff;
  }

  .jian {
    width: 3.5vw;
    height: 0.7vw;
    border-radius: 1vw;
    color: #ffffff;
    background: #fff;
  }

  .AdditionSubtraction>div:nth-of-type(1) {
    width: 7.2vw;
    height: 7.2vw;
    border-radius: 50%;
    background: rgba(141, 176, 250, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .AdditionSubtraction>div:nth-of-type(3) {
    width: 7.2vw;
    height: 7.2vw;
    border-radius: 50%;
    background: rgba(141, 176, 250, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 6.5vw;
    font-weight: 500;
  }

  .OwnExchange>span:nth-of-type(1) {
    font-size: 4.4vw;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    padding: 4.8vw 0 6.2vw 0;
  }

  .OwnExchange>div:nth-of-type(1) {
    background: #18235b;
    border-radius: 2.9vw;
    width: 48vw;
    height: 42vw;
    position: relative;
  }

  .OwnExchange>span:nth-of-type(2) {
    font-size: 2.6vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffe048;
  }

  .OwnExchange>div:nth-of-type(2) {
    height: 9vw;
    width: 38vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2.4vw 0 2.4vw 0;
  }

  .OwnExchange>div:nth-of-type(3)>img {
    width: 5vw;
    height: 5.8vw;
    margin: 0 1vw;
  }

  .OwnExchange>div:nth-of-type(3) {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #64d4ff 0%, #3072ff 100%, #3072ff 100%);
    border-radius: 5.5vw;
    padding: 2vw 24vw;
    font-size: 3.8vw;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    margin-top: 2vw;
  }

  .OwnExchange {
    width: 100vw;
    height: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
  }

  .getRules_s {
    z-index: 2002;
    position: fixed;
    width: 100vw;
    bottom: 0vw;
    /* height: 112vw; */
    background: #18235b;
    border-radius: 4.8vw 4.8vw 0px 0px;
    overflow: hidden;
    animation: fadeBottomIn 0.3s;
  }

  @keyframes fadeBottomIn {
    0% {
      transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }

    100% {
      -webkit-transform: none;
      transform: none;
    }
  }

  .overlay {
    z-index: 2001;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
  }

  .box_fa>div:nth-of-type(1)>img {
    width: 3.2vw;
    height: 3.8vw;
    padding-right: 1vw;
  }

  .box_fa>div:nth-of-type(1)>span {
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #b2d6ff;
    font-size: 2.9vw;
  }

  .box_fa>div:nth-of-type(1) {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .box_fa>span:nth-of-type(1) {
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    font-size: 3.3vw;
    padding: 1vw 0;
  }

  .box_fa>span:nth-of-type(2) {
    font-size: 10px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #babbe1;
    padding: 0 0 1vw 0;
    font-size: 2.4vw;
  }

  .box_fa>img {
    width: 20vw;
    height: 20vw;
  }

  .box_fa {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
  }

  .button_fa {
    margin-top: 2.9vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .button_fa>div:nth-of-type(1) {
    background: linear-gradient(135deg, #64d4ff 0%, #3072ff 100%, #3072ff 100%);
  }

  .button_fa>div:nth-of-type(2) {
    background: linear-gradient(135deg, #ffc450 0%, #e29f1c 100%);
  }

  .button_fa>div {
    font-size: 3.3vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    border-radius: 3.9vw;
    padding: 1vw 3vw;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 4vw;
  }

  .button_fa_>div {
    font-size: 3.4vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    border-radius: 5vw;
    padding: 1vw 6vw;
  }

  .border_list>div:nth-of-type(1) {
    width: 28.5vw;
    height: 34.3vw;
    background: #05072f;
    border-radius: 2vw;
  }

  .border_list_>div:nth-of-type(1) {
    position: absolute;
    width: 9.4vw;
    height: 4.3vw;
    /* background: linear-gradient(135deg, #c71eeb 0%, #4665f7 100%); */
    border-radius: 0px 2vw 0px 2vw;
    font-size: 2.66vw;
    /* color: #fff; */
    text-align: center;
    line-height: 4.8vw;
    right: 0vw;
  }

  .border_list_>div:nth-of-type(2) {
    width: 28.5vw;
    height: 38.6vw;
    background: #05072f;
    border-radius: 2vw;
  }

  .border_list_ {
    position: relative;
  }

  .body_content>div {
    width: 28.5vw;
    height: 42.3vw;
    margin-right: 2.1vw;
    margin-bottom: 4.8vw;
    display: flex;
    flex-direction: column;
  }

  .body_content_>div {
    height: 48.3vw;
  }

  .body_content {
    width: 92vw;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
  }

  .nth_farmg>div>img {
    width: 4.8vw;
    height: 5.6vw;
    vertical-align: sub;
  }

  .nth_farmg>div>span {
    font-size: 3.86vw;
    font-family: MicrosoftYaHeiSemibold;
    color: #ffffff;
  }

  .nth_farmg>span {
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #5b5d91;
    font-size: 2.8vw;
    padding-bottom: 2vw;
  }

  .fragment {
    width: 92vw;
    height: 17.4vw;
    margin: 4.12vw auto 2.23vw;
    background: #05072f;
    border-radius: 2.4vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .fragment>div:nth-of-type(1) {
    width: 45vw;
    height: 17.4vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .fragment>div:nth-of-type(2) {
    width: 1px;
    height: 4.8vw;
    background: #5b5d91;
  }

  .fragment>div:nth-of-type(3) {
    width: 45vw;
    height: 17.4vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .head_tabbar>div:nth-of-type(3) {
    font-size: 2.9vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 8vw;
  }

  .active {
    font-size: 4.3vw !important;
    font-weight: 500 !important;
    font-family: PingFangSC-Medium, PingFang SC !important;
  }

  .title_>div>div {
    width: 3.8vw;
    margin-top: 2vw;
    height: 2px;
    background: #ffffff;
    border-radius: 1px;
    position: absolute;
    bottom: 0;
  }

  .title_>div>span {
    font-size: 3.8vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }

  .title_>div {
    width: 20vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  .title_ {
    width: 40vw;
    display: flex;
    justify-content: space-between;
  }

  .head_tabbar>div:nth-of-type(1)>img {
    width: 2vw;
    height: 4vw;
    transform: rotate(180deg);
    margin-top: 1vw;
  }

  .head_tabbar>div:nth-of-type(1) {
    width: 10vw;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .head_tabbar {
    height: 8vw;
    width: 92vw;
    margin: 0 auto;
    /* margin: 14vw auto 0; */
    display: flex;
    align-content: center;
    justify-content: space-between;
    color: #ffffff;
  }

  .dressUpExchange {
    width: 100vw;
    /* height: 100vh; */
    background: url("../../public/img/dressUpExchange/di.jpg");
    background-size: cover;
  }

  .dressUpExchange1 {
    height: 100vh;
  }

  /* .dressUpExchange2 {
    height: auto;
  } */

  /* @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  html,
  body {
    height: 812px;
  }
} */
  .focusState {
    position: absolute;
  }
</style>